<template>
  <div class="blog">
    <a-layout class="body">
      <a-layout-header class="header">
        <div class="header-container acea-row row-middle">
          <a-icon :type="fold? 'menu-unfold' : 'menu-fold'" style="font-size:20px;cursor: pointer;" @click="changeFold" />
          <!-- <a-breadcrumb style="margin: 0 auto">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb> -->
        </div>
      </a-layout-header>
      <a-layout-content class="content acea-row" :style="!isMobile?'width:1200px':'width:100%'">
        <div class="menu" v-show="!isMobile" :style="fold?'width:80px':'width:200px'">
          <div>
            <a-menu
              mode="inline"
              :default-selected-keys="[1]"
              :open-keys="openKeys"
              style="height: 100%"
              :inline-collapsed="fold"
              @openChange="onOpenChange"
            >
              <template v-for="item in classList">
                <template>
                  <template v-if="item.id == -1">
                    <a-menu-item  v-for="item4 in item.articleList" :key="item4.id" @click="getDetail(item4.id)">
                      {{item4.title}}
                    </a-menu-item>   
                  </template>
                  <a-sub-menu v-else :key="item.sub">
                    <span slot="title">
                      <img class="classListIcon " :src="item.pic" alt="">
                      <a-icon type=" " v-show="false" />
                      <span>{{item.title}}</span>
                    </span>
                    <a-menu-item v-for="item4 in item.articleList" :key="item4.id" @click="getDetail(item4.id)">
                      {{item4.title}}
                    </a-menu-item>
                    <template v-for="(item2) in item.children.list">
                      <a-sub-menu v-if="item2.articleList.length != 0" :key="'subs-'+item2.id">
                        <span slot="title">
                          <span>{{item2.title}}</span>
                        </span>
                        <a-menu-item v-for="item3 in item2.articleList" :key="item3.id" @click="getDetail(item3.id)">
                          {{item3.title}}
                        </a-menu-item>
                      </a-sub-menu> 
                    </template>
                  </a-sub-menu>
                </template>
              </template>
            </a-menu>
          </div>
        </div>
        <a-drawer
          class="drawer"
          v-show="isMobile"
          placement="left"
          :closable="false"
          width="80%"
          :visible="fold2"
          @close="fold2 = false"
        >
          <a-menu
            mode="inline"
            :default-selected-keys="[1]"
            :open-keys="openKeys"
            style="height: 100%"
            :inline-collapsed="fold"
            @openChange="onOpenChange"
          >
            <template v-for="item in classList">
              <template>
                <template v-if="item.id == -1">
                  <a-menu-item v-for="item4 in item.articleList" :key="item4.id" @click="getDetail(item4.id)">
                    {{item4.title}}
                  </a-menu-item>   
                </template>
                <a-sub-menu v-else :key="item.sub">
                  <span slot="title">
                    <img class="classListIcon " :src="item.pic" alt="">
                    <a-icon type=" " v-show="false" />
                    <span>{{item.title}}</span>
                  </span>
                  <a-menu-item v-for="item4 in item.articleList" :key="item4.id" @click="getDetail(item4.id)">
                    {{item4.title}}
                  </a-menu-item>
                  <template v-for="(item2) in item.children.list">
                    <a-sub-menu v-if="item2.articleList.length != 0" :key="'subs-'+item2.id">
                      <span slot="title">
                        <span>{{item2.title}}</span>
                      </span>
                      <a-menu-item v-for="item3 in item2.articleList" :key="item3.id" @click="getDetail(item3.id)">
                        {{item3.title}}
                      </a-menu-item>
                    </a-sub-menu> 
                  </template>
                </a-sub-menu>
              </template>
            </template>
          </a-menu>
        </a-drawer>
        <div class="container acea-row row-center">
          <a-spin tip="加载中..." v-if="showSpin"></a-spin>
          <div v-else style="width:100%;">
            <div class="container-header acea-row row-center">
              {{articleDetail.title}}
            </div>
            <div class="container-tag acea-row row-middle row-center">
              <span v-if="articleDetail.author">作者：{{articleDetail.author}}<p>|</p></span>
              <span>发表于：{{moment(articleDetail.createTime*1000).format("YYYY-MM-DD")}}<p>|</p></span>
              <span>点击量：{{articleDetail.hits}}</span>
            </div>
            <div class="container-richText" v-html="articleDetail.content"></div>
          </div>
        </div>
      </a-layout-content>
      <a-layout-footer class="acea-row row-center">
        赣ICP备20004380号-1
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import request from 'api/request'
import moment from 'moment'

export default {
  data() {
    return {
      fold:false,
      fold2:false,
      rootSubmenuKeys: [],
      openKeys: [],
      isMobile:false,
      classList:[],
      articleDetail:{},
      showSpin:false,
      moment
    }
  },
  mounted() {
    const that = this
    let screenWidth = document.body.clientWidth
    that.setMod(screenWidth)
    window.onresize = () => {
      return (() => {
        screenWidth = document.body.clientWidth
        that.setMod(screenWidth)
        // console.log(screenWidth)
      })()
    }
  },
  created() {
    this.getClassList()
  },
  methods: {
    getClassList(){
      request.get("/article/getList").then(e=>{
        let data = e.data
        let res = this.setList(data,0)
        console.log(this.setList(data,0))
        this.classList = res.list
        this.rootSubmenuKeys = res.rootSubmenuKeys
        this.getDetail(1)
      })
    },
    getDetail(id){
      this.showSpin = true
      this.fold2 = false
      request.get("/article/getDetail",{id}).then(e=>{
        let articleDetail = e.data[0]
        this.articleDetail = articleDetail
        this.showSpin = false
      })
    },
    setList(data,pid){
      let list = []
      let subLoop = 1
      let rootSubmenuKeys = []
      for(let i of data){
        let obj_article = {
          id:i.article_id,
          title:i.article_title
        }
        if(i.pid == 0){
          i.sub = 'sub' + subLoop
          rootSubmenuKeys.push(i.sub)
          subLoop++
        }
        if(i.pid == pid && data.length != 0){
          let res = list.find(e=>e.id == i.class_id)
          let childrenList = data.filter(e=>e.pid == i.class_id)
          if(!res){ // list中不存在时push进去
            let obj_class = {
              id:i.class_id,
              pic:i.class_pic,
              title:i.class_title,
              articleList:i.article_id!==null?[obj_article]:[],
              sub:i.sub,
              children:this.setList(childrenList,i.class_id)
            }
            list.push(obj_class)
          }else{
            res.articleList.push(obj_article)
          }
        }
        if(i.class_id === null){
          let res = list.find(e=>e.id == -1)
          if(!res){
            let obj_class = {
              id:-1,
              articleList:[obj_article],
            }
            list.unshift(obj_class)
          }else{
            res.articleList.push(obj_article)
          }
        }
      }
      return {list,rootSubmenuKeys}
    },
    changeFold(){
      if(!this.isMobile){
        this.fold = !this.fold
      }else{
        this.fold2 = !this.fold2
      }
    },
    setMod(screenWidth){
      if(screenWidth <= 750){
        this.isMobile = true
      }else{
        this.isMobile = false
      }
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
}
</script>

<style scoped>
  .blog{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    overflow: hidden;
  }
  .blog .body{
    height: 100%;
  }
  .blog .body .header{
    padding: 0;
    background-color: #ffffff;
  }
  .blog .body .header .header-container{
    height: 64px;
    max-width: 1200px;
    margin:  0 auto;
    padding: 0 20px;
  }
  .blog .body .content{
    /* width: 1200px; */
    margin: 24px auto 0;
    /* background-color: #ffffff; */
  }
  .blog .body .content .menu{
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    background-color: #ffffff;
  }
  .blog .body .content .container{
    width: 100%;
    padding: 24px;
    /* min-height: 200px; */
    height: 100%;
    flex: 1;
    box-sizing: border-box;
    background-color: #ffffff;
    overflow-y: auto;
  }
  .classListIcon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .blog .body .content .container .container-tag p{
    margin: 0 10px;
  }
  .blog .body .content .container .container-tag span{
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.45);
  }
  .blog .body .content .container .container-richText{
    margin-top: 20px;
  }
  .drawer >>> .ant-drawer-body{
    padding: 0;
  }
</style>